<template>
  <div class="article_content">
    <div class="content-wrap my-search">
      <el-form
        :model="queryParams"
        size="mini"
        ref="queryForm"
        :inline="true"
        label-width="50px"
      >
        <el-form-item label="作者" prop="author">
          <el-input
            v-model="queryParams.author"
            placeholder="请输入作者名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
            style="width: 140px"
          />
        </el-form-item>
        <el-form-item label="标题" prop="header">
          <el-input
            v-model="queryParams.header"
            placeholder="请输入标题"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="账号" prop="loginId" v-if="false">
          <el-input
            v-model="queryParams.loginId"
            placeholder="请输入账号"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>

        <el-form-item label="日期">
          <el-date-picker
            v-model="dateRange"
            size="small"
            style="width: 220px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-row :gutter="10" class="grid-content">
      <el-col :span="1.5">
        <el-button
          class="article_add"
          type="cyan"
          size="mini"
          v-hasPermi="['system:article:add']"
          @click="handleAdd"
        >
          &nbsp;&nbsp;&nbsp;&nbsp;新增文章
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          class="article_cut"
          type="cyan"
          size="mini"
          v-hasPermi="['system:article:remove']"
          @click="handleDel"
          >删除</el-button
        >
      </el-col>
    </el-row>
    <el-table
      :data="articleList"
      @selection-change="handleSelectionChange"
      ref="multipleTable"
    >
      <el-table-column type="selection" width="55" align="center" />

      <el-table-column
        label="标题"
        align="left"
        prop="header"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span @click="getArticleUrl(scope.row)" style="color: #009a94">{{
            scope.row.header
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        align="center"
        prop="createdDate"
        width="220"
      />
      <el-table-column label="作者" align="center" prop="author1" width="220" />

      <el-table-column
        label="操作"
        align="center"
        width="200"
        v-hasPermi="['system:article:edit']"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
            :disabled="scope.row.relevance == 2"
            v-hasPermi="['system:article:edit']"
            >编辑</el-button
          >
          <el-button
            type="text"
            icon="el-icon-delete"
            @click="handleDel(scope.row)"
            :disabled="scope.row.relevance == 2"
            v-hasPermi="['system:article:edit']"
            >删除</el-button
          >
          <!-- <el-button size="mini" icon="el-icon-upload2" @click="handleUp(scope.$index,scope.row,)" > </el-button>
          <el-button size="mini" icon="el-icon-download" @click="handleDown( scope.$index,scope.row,)" > </el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-button type="cyan" @click="aaaaa">确 定</el-button> -->

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getArticleList"
    />
  </div>
</template>

<script>
import {
  getLibraryList,
  addLibrary,
  editLibrary,
  getLibraryArticle,
  delLibraryArticleList,
} from "@/api/content/library";
export default {
  props: {},
  data() {
    return {
      // 查询参数
      queryParams: {
        type: "0",
        pageNum: 1,
        pageSize: 10,
      },
      // 日期范围
      dateRange: [],
      // 选中得文章id
      articleIds: [],
      //文章列表
      articleList: [],
      total: 0,
    };
  },

  components: {},

  computed: {},
  created() {},

  mounted() {
    this.getArticleList();
  },

  watch: {},

  methods: {
    /** 获取文章列表 */
    getArticleList() {
      getLibraryList(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          this.articleList = response.data.list;
          this.total = response.data.totalCount;
        }
      );
    },
    //新建文章
    handleAdd() {
      let { href } = this.$router.resolve({
        path: "/library/addlibrary",
        query: {
          type: "persional",
        },
      });
      window.open(href, "_blank");
    },
    //编辑按钮
    handleEdit(row) {
      let { href } = this.$router.resolve({
        path: "/library/addlibrary",
        query: {
          articleId: row.articleId || null,
          type: "persional",
        },
      });
      window.open(href, "_blank");
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.articleIds = selection.map((item) => item.articleId).join(",");
    },
    //文章标题跳转文章页面
    getArticleUrl(row) {
      articleViewUrl({
        articleId: row.articleId,
      }).then((res) => {
        let href = res.msg;
        window.open(href, "_blank");
      });
    },
    //删除按钮
    handleDel(row) {
      const articleIds = row.articleId || this.articleIds;
      if (!articleIds) {
        this.msgError("请选择文章");
        return;
      }
      this.$confirm("您确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delLibraryArticleList({ articleIds: articleIds }).then((res) => {
            if (res.code == 200) {
              this.msgSuccess("文章删除成功");
            }
            this.getArticleList();
            this.cacle();
          });
        })
        .catch(() => {
          return;
        });
    },
    cacle() {
      // 文章复制 文章移动
      this.dialogCloumn && this.$refs.xTree_article.clearCheckboxRow();
      this.dialogCloumn = false;
      // 栏目复制 栏目移动
      this.dialogChannel && this.$refs.xTree_article.clearRadioRow();
      this.dialogChannel = false;
      this.dialogUser = false;
      //取消 栏目选择
      this.$nextTick(() => {});
      this.reset();
    },
    // 表单重置
    reset() {
      this.cloumnId = [];
      this.checkUserList = [];
      this.query = "";
      this.articleId = "";
      this.setWorkflowId = undefined;
      this.$refs.multipleTable.clearSelection();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getArticleList();
    },
  },
  destroyed() {},
};
</script>

<style scoped lang="scss">
.bottom {
  display: flex;
  // height: 500px;
  height: 50vh;
  .bottom_l {
    // overflow: auto;
    flex: 1;
    height: 100%;
    // background: #fffbf0 !important;
    display: flex;
    flex-direction: column;
    .left-table {
      flex: 1;
      height: 0;
      overflow: overlay;
      overflow: auto;
    }
  }
  // .bottom_r {
  //   flex: 1;
  //   overflow: auto;
  //   background: #fbfeff;
  //   padding: 0 0 0 30px;
  // }
}
.reset-steps {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  :first-child {
    .set {
      display: none !important;
    }
  }
  .step-item {
    height: 60px;
    position: relative;
    margin: 10px;
    display: flex;

    .name {
      display: inline-block;
      height: 100%;
      // min-width: 300px;
      width: auto;
      margin-right: 20px;
    }
    .set {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: flex-start;
    }
    &:after {
      content: "";
      height: 40px;
      width: 3px;
      background: red;
      position: absolute;
      left: 20px;
      bottom: 0px;
    }
    &:before {
      content: "";
      border: 10px solid transparent;
      border-top-color: #f00;
      width: 10px;
      height: 10px;
      position: absolute;
      bottom: 0;
      left: 12px;
      transform: translateY(20px);
    }
    &:last-child:after,
    &:last-child:before {
      display: none;
    }
  }
  .lineActive {
    background-color: #1e4b9f;
  }
}
.set_top {
  min-height: 40%;
  padding: 20px;
}
.set_bottom {
  height: auto;
  padding: 20px;
}
.el-popover {
  .userList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    li {
      cursor: pointer;
      // width: 30%;
      line-height: 30px;
      height: 30px;
    }
    i {
      // width: 30%;
    }
  }
}

.icon_guanbi {
  color: red;
}
.icon_wancheng {
  color: blue;
}

.el-date-editor.el-input.el-date-editor--datetime {
  border-right: none;
  ::v-deep .el-input__inner {
    padding-right: 0;
  }
}
</style>
